<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入ElementUI样式 -->
		<link rel="stylesheet" href="css/elmentui.css">
		<!-- 引入vue的库，一定要在elmentui的库文件之前 -->
		<script src="js/vue.js"></script>
		<!-- 引入axios网络请求库，完成后台异步请求的http通信，代替ajax请求（也可以使用） -->
		<script src="js/axios.min.js"></script>
		<!-- 引入ElementUI组件库 -->
		<script src="js/elmentui.js"></script>
		<!-- 引入qs库，处理url参数；qs.parse 方法可以把一段格式化的字符串转换为对象格式，
		qs.stringify 则和 qs.parse 相反，是把一个参数对象格式化为一个字符串。 -->
		<script src="js/qs.min.js"></script>
	</head>
	<body>
		<div id="loginedapp">
			<el-form :model="loginBean" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
			  <el-row>
			    <el-col :span="8">
					<el-form-item label="用户名" prop="username">
					  <el-input type="password" v-model="loginBean.username" placeholder="请输入用户名" autocomplete="off"></el-input>
					</el-form-item>
				</el-col>		  
			  </el-row>
			  <el-row>
			    <el-col :span="8">
					<el-form-item label="密码" prop="userpwd">
					  <el-input type="password" v-model="loginBean.userpwd" placeholder="请输入密码" autocomplete="off"></el-input>
					</el-form-item>				
				</el-col>			   
			  </el-row>
			  <el-form-item>
			    <el-button type="primary" @click="doLogin()">提交</el-button>
			    <el-button @click="resetForm('ruleForm')">重置</el-button>
			  </el-form-item>
			</el-form>
		</div>
		<!-- 使用vue组件进行处理 -->
		<script>
			// 创建一个vue组件对象
			 var app=new Vue({
				 el:"#loginedapp",//绑定dom组件，一般使用一个div将需要绑定的dom组件包含起来
				 data:{
					 // 绑定数据结构
					 loginBean:{
						 username:"",
						 userpwd:""
					 }
					 
				 },
				 methods:{//dom组件的行为方法
					 doLogin:function(){
						 console.log("登录事件。。。。")
						 console.log(this.loginBean)
						 // 使用let声明一个局部变量  
						 // 发送post请求的数据字符串（参数）
						 let req_data=Qs.stringify(this.loginBean);
						 // 使用axios网络请求库，进行同服务器异步通信,验证用户登录的合法性
						 axios.post('http://localhost:8086/dzrg0112_springboot_vue_elementui_server/doAjaxLogin',req_data).then(function(response){
							 console.log(response.data);
							 if(response.data!=null&&response.data=='ok'){
								 console.log("登录成功")
								 window.location.href="index.html"
							 }
							 
						 }).catch(function(error){
							 console.log(error)
						 })
						 
					 },
					  resetForm(formName) {
					         this.$refs[formName].resetFields();
					       }
					 
				 }
				 
				 
				 
			 })
		</script>
	</body>
	
</html>
